<!DOCTYPE html>
<html lang="ZH">
<head>
<meta charset="UTF-8">
<title>spring boot + mybatis + vue + elementui</title>
<link rel="stylesheet" href="//cdn.bootcss.com/element-ui/1.1.2/theme-default/index.css">
<script src="//cdn.bootcss.com/vue/2.1.8/vue.min.js"></script>
<script src="//cdn.bootcss.com/element-ui/1.1.2/index.js"></script>
<script src="//cdn.bootcss.com/vue-resource/1.0.3/vue-resource.min.js"></script>
</head>
<body>
	<div id="vm">
	    <div>
		    <el-col :span="24">
		        <el-form :inline="true" >
		            <el-form-item>
		                <el-input placeholder="请输入车牌号" :v-model="carInfo.carNum"></el-input>
		            </el-form-item>
		            <el-form-item>
		                <el-input placeholder="请输入业主姓名" :v-model="carInfo.carOwner"></el-input>
		            </el-form-item>
		             
		            <el-form-item>
		                <el-button type="primary" @click="queryCar">查询</el-button>
		            </el-form-item>
		
		            <el-form-item>
		                <el-button type="success" @click="addCar">新增</el-button>
		           </el-form-item>
		        </el-form>
		    </el-col>
        </div> 
		<el-table border fit :data="tableData" highlight-current-row style="width: 100%;font-size: 12px;"> 
		    <el-table-column type="index" label="序号" width="70"></el-table-column> 
		    <el-table-column prop="carNum" label="车牌号"></el-table-column> 
			<el-table-column prop="carBrand" label="车辆品牌"></el-table-column> 
			<el-table-column prop="carColor" label="车身颜色"></el-table-column> 
			<el-table-column prop="carType" label="车型"></el-table-column> 
			<el-table-column prop="carOwner" label="业主姓名"></el-table-column> 
			<el-table-column prop="roomNo" label="房屋号"></el-table-column> 
			<el-table-column prop="carNumType" label="车牌类型"></el-table-column> 
			<el-table-column prop="remark" label="备注"></el-table-column> 
			<el-table-column fixed="right" label="操作" width="150">
	            <template scope="scope">
	                <el-button type="text" @click="handleEdit(scope.$index,scope.row)">编辑</el-button>
	                <el-button type="text" @click="handleDelete(scope.$index,scope.row)">删除</el-button>
	            </template>  
            </el-table-column>
		</el-table>
		<el-col class="toolbar" style="padding:10px;"> 
		    <el-pagination @current-change="findAll" :current-page="currentPage" :page-size="10"
			     layout="total, prev, pager, next, jumper" :total="total" style="float:right">
			</el-pagination> 
		</el-col>
		
		<el-dialog title="新增车辆" v-model="dialogVisible">
		     <el-form :inline="true" :model="carInfo" ref="carInfo" label-width="70px" class="deptInfo-ruleForm">
                 <el-form-item label="车牌号" prop="carNum" >
                     <el-input type="text" v-model="carInfo.carNum" auto-complete="off" :disabled="false"></el-input>
                 </el-form-item>
	             <el-form-item label="车辆品牌" prop="carBrand">
	                 <el-input type="text"  v-model="carInfo.carBrand" auto-complete="off" :disabled="false"></el-input>
	             </el-form-item>
	             <el-form-item label="车身颜色" prop="carColor" >
	              	<el-input type="text" v-model="carInfo.carColor" auto-complete="off" :disabled="false"></el-input>
	             </el-form-item>
	            <el-form-item label="车牌颜色" prop="plateNumColor" >
	              	<el-input type="text" v-model="carInfo.plateNumColor" auto-complete="off" :disabled="false"></el-input>
	            </el-form-item>
	            <el-form-item label="业主姓名" prop="carOwner" >
	             	<el-input type="text" v-model="carInfo.carOwner" auto-complete="off" :disabled="false"></el-input>
	            </el-form-item>
	            <el-form-item label="房屋号" prop="roomNo" >
	              	<el-input type="text" v-model="carInfo.roomNo" auto-complete="off" :disabled="false"></el-input>
	            </el-form-item>
	            <el-form-item label="车型" prop="carSize" >
	                <el-select v-model="carInfo.carSize" placeholder="请选择" :disabled="false">
	                    <el-option label="大" value="大"></el-option>
	                    <el-option label="中" value="大"></el-option>
	                    <el-option label="小" value="小"></el-option>
	            	</el-select>
	            </el-form-item >
                <el-form-item label="车辆类型" prop="carType" >
                    <el-input type="text" v-model="carInfo.carType" auto-complete="off" :disabled="false"></el-input>
                </el-form-item>
            </el-form>
	        <span slot="footer" class="dialog-footer">
		        <el-button @click="dialogVisible = false">取 消</el-button>
		        <el-button type="primary" @click="saveCar">保 存</el-button>
	        </span>
		</el-dialog>
	</div>
	
</body>
<script> 
    Vue.http.options.emulateJSON = true; 
    Vue.http.options.emulateHTTP = true; 
    var vm = new Vue({ 
    	el: '#vm', 
    	data: { 
    		tableData: [], 
    		currentPage: 1, 
    		total: 10, 
    		listLoading: false, 
    		username: null,
    		dialogVisible: false,
    		formInline: {
    			carNum: '',
    			carOwner: ''
    		},
    		carInfo: {
    			carNum: '',
    			carBrand: '',
    			carColor: '',
    			plateNumColor: '',
    			carOwner: '',
    			roomNo: '',
    			carSize: '',
    			carType: ''
    		},
    	}, 
   		mounted: function () { 
   			this.findAll(); 
   		}, 
		methods: { 
			findAll: function (currentPage) { 
				this.listLoading = true; 
				if (!isNaN(currentPage)) { 
					this.currentPage = currentPage; 
				} 
				var params_ = { 
					pageNum: this.currentPage, 
					pageSize: 10
				}; 
				if (this.username && this.username.trim() != "") { 
					params_['username'] = this.username; 
				} 
				this.$http.get("car/getTableData", { params: params_ }).then(function (response) { 
					this.total = response.data.count; 
					this.tableData = []; 
					for (var key in response.data.list) { 
						this.$set(this.tableData, key, response.data.list[key]); 
						} }).catch(function (response) { 
							console.error(response); 
						}); 
				        this.listLoading = false; 
			}, 
			queryCar: function(currentPage){
				this.liseLoading = true;
				if(!isNaN(currentPage)){
					this.currentPage = currentPage;
				}
				var params_ = {
					pageNum: this.currentPage, 
					pageSize: 10,
					carNum: carInfo.carNum,
					carOwner: carInfo.carOwner
				};
				this.$http.get("car/findCarList",{ params: params_ })
				.then(function(response){
					this.total = response.data.count;
					this.tableData = [];
					for(var key in response.data.list){
						this.$set(this.tableData, key, response.data.list[key]);
					}
				})
				.catch(function(response){
					console.error(response);
				});
				this.listLoading = false;
			}
			//新增按钮
			addCar: function(){
				this.carInfo.carNum='';
				this.carInfo.carBrand='';
				this.carInfo.carColor='';
				this.carInfo.plateNumColor='';
				this.carInfo.carOwner='';
				this.carInfo.roomNo='';
				this.carInfo.carSize='';
				this.carInfo.carType='';
				this.dialogVisible=true;
			},
			//保存
			saveCar: function(){
				var _this = this;
				var params_ = { 
						carNum: _this.carInfo.carNum,
		    			carBrand: _this.carInfo.carBrand,
		    			carColor: _this.carInfo.carColor,
		    			plateNumColor: _this.carInfo.plateNumColor,
		    			carOwner: _this.carInfo.carOwner,
		    			roomNo: _this.carInfo.roomNo,
		    			carSize: _this.carInfo.carSize,
		    			carType: _this.carInfo.carType
			    }; 
				this.$http.get("car/saveCar",{params: params_}).then(function(response){
					var errorcode=response.data.errorcode;
					if(errorcode=="200"){
						this.$message({
				            message: '保存成功！',
				            type: 'success'
				        });
						_this.findAll(1);
					}
					_this.dialogVisible = false;
				})
			},
			//编辑
			handleEdit: function(index,row){
				var _this = this;
				this.$http.get('car/getCarById'
						,{
					params:{
						id:row.id
					},
				})
				.then(function(response){
					var errorcode=response.data.errorcode;
					if(errorcode=="200"){
						_this.carInfo = response.data.data;
					} else {
						_this.$message.error(response.data.errormsg);
					}
				})
				.catch(function(error){
					console.log(error);
				});
				this.dialogVisible=true;
			},
			//删除
			handleDelete: function(index,row){
				var _this = this;
				_this.$confirm('是否要删除此车辆信息','提示',{
					confirmButtonText:'确定',
					cancelButtonText:'取消',
					type:'warning'
				})
				.then(()=>{
					this.$http.get('car/delete'
							,{
						params:{
							id:row.id,
						},
					})
					.then(function(response){
						var errorcode=response.data.errorcode;
						if(errorcode=='200'){
							_this.$alert('删除成功','提示',{
								confirmButtonText:'确定',
								callback:action=>{
									_this.findAll(1);
								}
							});
						} else if(errorcode=='500') {
							_this.$alert('删除失败','提示',{
								confirmButtonText: '确定',
								callback:action => {
									_this.findAll(1);
								}
							});
						}
					})
					.catch(() =>{
						
					});
				})
				.catch(() => {});
			},
			formatDate: function getNowFormatDate(time) { 
				var date = new Date(time); 
				var seperator1 = "-"; 
				var seperator2 = ":"; 
				var month = date.getMonth() + 1; 
				var strDate = date.getDate(); 
				if (month >= 1 && month <= 9) { 
					month = "0" + month; 
					} if (strDate >= 0 && strDate <= 9) { 
						strDate = "0" + strDate; 
						} 
					var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate + " " + date.getHours() + seperator2 + date.getMinutes() + seperator2 + date.getSeconds(); 
					return currentdate; 
			}, 
			formatCreateDate: function (row, column) { 
				if (row.createTime != null) { 
					return this.formatDate(row.createTime); 
                } else { 
                	return ''; 
                } 
			}, 
			formatSex: function (row, column) { 
				if (row.sex != null) { 
					return row.sex == 1 ? '男' : '女'; 
				} 
			}, 
		} 
   		}); 
    </script>
</html>
